<template>
  <div>
    <!-- 
      通过点击按钮翻转字符串

      1. 当点击按钮时触发点击事件，进行变量字符串的翻转
      2. 通过分析发现字符串没有自己的翻转方法但是数组有 =》 将字符串转为数组反转后再转回字符串
      3. 字符串 通过 split 方法 转为数组
      4. 通过 reverse 方法进行数组翻转
      5. 将翻转的数据通过 join 方法 转为字符串
      6. 将新的字符串进行赋值操作
    -->
    <div>{{ str }}</div>
    <button @click="btn">点击翻转</button>
  </div>
</template>

<script>
export default {
  name: 'DemoIndex02',
  data () {
    return {
      str: 'Hello world'
    }   
  },

  methods: {
    btn () {
      // 转数组
      let arr = this.str.split('')
      // 翻转数组 => reverse方法会改变原数组
      arr.reverse()
      // 转化为字符串
      let tempStr = arr.join('')
      // 将新字符串赋值
      this.str = tempStr

      // 简化写法 => 方法是可以用点语法连用的
      this.str = this.str.split('').reverse().join('')
    }
  }
}
</script>

<style>

</style>